import React, { useEffect } from "react";
import { Modal, Form, Space } from "antd";
import { modalPropsType } from "@/constants/types";
import { useModel } from "@umijs/max";
import XlCheckBox from "@/components/Form/XlCheckBox";
import XlSelect from "@/components/Form/XlSelect";
import { useRequest } from "ahooks";
import { fetchSettlementDateLatestWeek } from "@/pages/BasicInfo/services";

const {Item} = Form;
const labelCol = {span: 4};
const rules = [{required: true, message: '此项必填'}];

const LineQuoteCopy = ({title, visible, onCancel, onSubmit, selectedRows, loading}: modalPropsType) => {
  const [form] = Form.useForm();
  const { getDict } = useModel("dictModel");
  const {data: weeks} = useRequest(fetchSettlementDateLatestWeek);

  const countrys = getDict("country");
  const deliveryMethods = getDict("deliveryMethod");
  const prdTypes = getDict("prdType");


  const handleSubmit =async () => {
    const res = await form.validateFields();
    onSubmit(res);
  }

  useEffect(() => {
    if (countrys?.length > 0) {
      form.setFieldValue('countries', countrys?.map((v: any) => v.value));
    } else {
      form.setFieldValue('countries', []);
    }
  }, [JSON.stringify(countrys)]);

  useEffect(() => {
    if (deliveryMethods?.length > 0) {
      form.setFieldValue('deliveryMethods', deliveryMethods?.map((v: any) => v.value));
    } else {
      form.setFieldValue('deliveryMethods', []);
    }
  }, [JSON.stringify(deliveryMethods)]);

  useEffect(() => {
    if (prdTypes?.length > 0) {
      form.setFieldValue('products', prdTypes?.map((v: any) => v.value));
    } else {
      form.setFieldValue('products', []);
    }
  }, [JSON.stringify(prdTypes)]);

  return (
    <Modal
      title={title}
      open={visible}
      onCancel={onCancel}
      onOk={handleSubmit}
      maskClosable={false}
      width="650px"
    >
      <Form form={form} labelCol={labelCol} className="modal-form-padding">
        <Item label="国家" name="countries">
          <XlCheckBox.ButtonGutterGroup hasAll={false} options={countrys} />
        </Item>
        <Item label="派送方式" name="deliveryMethods">
          <XlCheckBox.ButtonGutterGroup hasAll={false} options={deliveryMethods} />
        </Item>
        <Item label="产品" name="products">
          <XlCheckBox.ButtonGutterGroup hasAll={false} options={prdTypes} />
        </Item>
        <Item label="周次">
          <Space style={{alignItems: 'center'}}>
            <Item name="originalWeek" noStyle rules={rules}>
              <XlSelect style={{width: 120}} allowClear options={weeks?.map((v: {label: String, value: String}) => ({label: v, value: v}))}  />
            </Item>
            <span>-</span>
            <Item name="targetWeek" noStyle rules={rules}>
              <XlSelect style={{width: 120}} allowClear  options={weeks?.map((v: {label: String, value: String}) => ({label: v, value: v}))}  />
            </Item>
          </Space>
        </Item>
      </Form>
    </Modal>
  );
}
export default LineQuoteCopy;